// Object.defineProperty()
// 拦截：对某个对象的某个key做拦截
function defineReactive(obj,key,val) {
  // 一开始只是定义了一个响应式，并没有赋值
  // 如果val是个对象，就需要递归
  observe(val)

  Object.defineProperty(obj,key,{
    get() {
      console.log('get',key,val);
      return val
    },
    set(newVal) {
      if (val!=newVal) {
        val = newVal
        // 新赋值的是对象，需要递归处理
        observe(newVal)
        console.log('set',key,val);
      }
    }
  })
}

// 对象调用observe方法,实现key的代理拦截
function observe(obj) {
  if (typeof obj!='object'||obj===null) {
    return obj
  }

  Object.keys(obj).forEach(key=>{
    defineReactive(obj,key,obj[key])
  })
}

// 手动代理新的属性
function set(obj,key,val) {
  defineReactive(obj,key,val)
}
const obj = { foo: 'foo', bar: 'bar', baz: { a: 1 } }
observe(obj)
set(obj, 'dong', 'dong')
obj.dong = 'dongdong'